<template>
  <HeadContainer title="确认资讯" @back="back()">
    <div class="gap-col-16">
      <div class="d-flex justify-space-between align-center">
        <div class="text-white font-size-14 font-style-normal font-weight-500 line-height-140">您的照片資訊</div>
        <Icon size="16" name="edit"></Icon>
      </div>
      <div>
        <div class="text-white font-size-12 font-style-normal font-weight-400 line-height-120">1. 證件資訊正面照片</div>
        <div class="card gap-col-16 mt-2">
          <div class="picture bg-primary">
            <v-img :src="transBlobToUrl(identityPhoto)" class="picture"></v-img>
          </div>
        </div>
      </div>
      <div>
        <div class="text-white font-size-12 font-style-normal font-weight-400 line-height-120">
          2. 用戶臉部與證件資訊正面照片
        </div>
        <div class="card gap-col-16 mt-2">
          <div class="picture bg-primary">
            <v-img :src="transBlobToUrl(facePhoto)" class="picture"></v-img>
          </div>
        </div>
      </div>
      <v-divider></v-divider>
      <div class="d-flex justify-space-between align-center">
        <div class="text-white font-size-14 font-style-normal font-weight-500 line-height-140">
          您的資訊 (需與證件相符)
        </div>
        <Icon size="16" name="edit"></Icon>
      </div>
      <div>
        <div class="text-input font-size-12 font-style-normal font-weigt-400 line-heigh-120 mb-2">姓名</div>
        <div class="text-white font-size-14 font-style-normal font-weight-500 line-height-140">{{ profile.name }}</div>
      </div>
      <div>
        <div class="text-input font-size-12 font-style-normal font-weigt-400 line-heigh-120 mb-2">出生年月日</div>
        <div class="text-white font-size-14 font-style-normal font-weight-500 line-height-140">1994/08/06</div>
      </div>
      <div>
        <div class="text-input font-size-12 font-style-normal font-weigt-400 line-heigh-120 mb-2">证件号码</div>
        <div class="text-white font-size-14 font-style-normal font-weight-500 line-height-140">IDC23458990866</div>
      </div>
      <div>
        <div class="text-input font-size-12 font-style-normal font-weigt-400 line-heigh-120 mb-2">证件发行日</div>
        <div class="text-white font-size-14 font-style-normal font-weight-500 line-height-140">1994/08</div>
      </div>
      <div>
        <div class="text-input font-size-12 font-style-normal font-weigt-400 line-heigh-120 mb-2">Email</div>
        <div class="text-white font-size-14 font-style-normal font-weight-500 line-height-140">
          5487lovesex@gmail.com
        </div>
      </div>
      <v-divider></v-divider>
      <BlockButton label="送出申請資料" :is-gradient="false" @click="openConfirmDialog"></BlockButton>
    </div>
  </HeadContainer>
</template>
<script setup>
import { VImg } from 'vuetify/components'
import { storeToRefs } from 'pinia'
import { useBecomeCreatorDataStore } from '@/store/become-creator-data'
import { useBecomeCreatorRouteStore } from '@/store/become-creator-route'
import { usePopupDialogStore } from '@/store/popup-dialog'
import { transBlobToUrl } from '@/utils/transform.js'
import BlockButton from '@/components/button/BlockButton.vue'
import HeadContainer from '@/components/layout/HeadContainer.vue'
import { POPUP_DIALOG_TYPE } from '@/constant'

const routeStore = useBecomeCreatorRouteStore()
const { back } = routeStore

const dataStore = useBecomeCreatorDataStore()
const { identityPhoto, facePhoto, profile } = storeToRefs(dataStore)

const { $popupDialog } = usePopupDialogStore()

const emit = defineEmits(['backToMine'])

const openConfirmDialog = () => {
  $popupDialog(POPUP_DIALOG_TYPE.CONFIRM, {
    title: '再次確認',
    content: '請問您是否確認要送出資料呢？',
    confirm: () => {},
    cancel: () => {},
    confirmText: '继续',
    cancelText: '取消',
    showClose: false,
  })
    .next(POPUP_DIALOG_TYPE.ALERT, {
      title: '再次確認',
      content:
        '太棒了！相關資料已成功送出，我們將會盡快在七天內完成您的審核，結果將以信箱(username@gmail.com)的方式通知您。感謝您的耐心！',
      confirmText: '确认',
      confirm: () => emit('backToMine'),
      showClose: false,
    })
    .open()
}
</script>
<style scoped lang="scss">
.card {
  display: flex;
  padding: 1rem;
  flex-direction: column;
  align-items: center;
  align-self: stretch;

  border-radius: 0.625rem;
  background: var(--bg-dialog, #333546);
}

.picture {
  width: 16.875rem;
  height: 10.625rem;
  border-radius: 0.625rem;
}
</style>
